// 淡入淡出
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

// 缩放进出场
.bounce-enter-active {
  animation: bounce-in .3s;
}
.bounce-leave-active {
  animation: bounce-in .3s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  // 50% {
  //   transform: scale(1.1);
  // }
  100% {
    transform: scale(1);
  }
}

/* 可以设置不同的进入和离开动画 右进右出*/
/* 设置持续时间和动画函数 */
.slide-fade-right-enter-active {
  transition: all .3s ease;
}
.slide-fade-right-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-right-enter, .slide-fade-right-leave-to {
  transform: translateX(80%);
  opacity: 1;
}

/* 可以设置不同的进入和离开动画 左进左出*/
/* 设置持续时间和动画函数 */
.slide-fade-left-enter-active {
  transition: all .3s ease;
}
.slide-fade-left-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-left-enter, .slide-fade-left-leave-to {
  transform: translateX(-80%);
  opacity: 1;
}

// 旋转动画
.rotate-enter-active {
  transition: all 30s ease;
}
.rotate-leave-active {
  transition: all 30s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.rotate-enter, .rotate-leave-to {
  transform:rotate(180deg);

}

/*无限旋转动画*/
@keyframes changDeg{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
// 右进左出

.side-right-enter {
  opacity: 0;
  transform: translateX(100%);
}
.side-right-to {
  opacity: 0;
  transform: translateX(-100%);
  position:absolute;
}
.side-right-enter-active, .side-right-leave-active {
  transition: all 0.3s ease;
}

.side-left-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.side-left-to {
  opacity: 0;
  transform: translateX(100%);
}
.side-left-enter-active, .side-left-leave-active {
  transition: all 0.5s ease;
}
